import React, { useState, useRef } from "react";
import { Document, Page } from "react-pdf";
import { pdfjs } from "react-pdf";

import HTMLFlipBook from "react-pageflip";

import "react-pdf/dist/Page/AnnotationLayer.css";
// import "react-pdf/dist/Page/TextLayer.css";

import "./App.css";

pdfjs.GlobalWorkerOptions.workerSrc =
  "https://cdn.staticfile.org/pdf.js/3.11.174/pdf.worker.min.js";

type FlipBook = {
  flipNext: () => void;
  flipPrev: () => void;
};

type FlipBookEle = {
  pageFlip(): FlipBook;
};

const MyPage = React.forwardRef(
  (
    props: {
      pageNumber: number;
    },
    ref: React.LegacyRef<HTMLDivElement>
  ) => {
    return (
      <div
        className="my-page"
        style={{
          border: "1px solid #ccc",
        }}
        ref={ref}
      >
        <Page pageNumber={props.pageNumber} width={500} />
      </div>
    );
  }
);

const App = React.memo(
  React.forwardRef(() => {
    const [numPages, setNumPages] = useState<number>();
    const [pageNumber, setPageNumber] = useState<number>(1);

    const [flipBook, setFlipBook] = useState<FlipBook | null>(null);
    const flipBookRef = useRef<FlipBookEle | null>(null);

    function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
      setNumPages(numPages);
    }

    return (
      <>
        <div>
          <Document file="./ebook.pdf" onLoadSuccess={onDocumentLoadSuccess}>
            <HTMLFlipBook
              width={500}
              height={800}
              size="stretch"
              minWidth={500}
              minHeight={800}
              maxWidth={1000}
              maxHeight={1500}
              maxShadowOpacity={0.5}
              showCover={true}
              mobileScrollSupport={true}
              onFlip={console.log}
              onChangeOrientation={console.log}
              onChangeState={console.log}
              className="demo-book"
              ref={flipBookRef}
              // ref={(el) => {
              //   if (el == null) return;
              //   // console.log(123);
              //   // setFlipBookEle(el);
              //   const flipBook = el.pageFlip();
              //   console.log(flipBook);
              //   flipBook && setFlipBook(flipBook);
              // }}
              style={{
                width: 1000,
                height: 800,
              }}
              startPage={0}
              drawShadow={false}
              flippingTime={2000}
              usePortrait={false}
              startZIndex={0}
              autoSize={false}
              clickEventForward={false}
              useMouseEvents={false}
              swipeDistance={0}
              showPageCorners={false}
              disableFlipByClick={false}
            >
              <MyPage pageNumber={pageNumber} />
              <MyPage pageNumber={pageNumber + 1} />
              <MyPage pageNumber={pageNumber + 2} />
              <MyPage pageNumber={pageNumber + 3} />
            </HTMLFlipBook>
          </Document>
        </div>
        <p>
          <button
            onClick={() => {
              flipBookRef.current?.pageFlip()?.flipPrev();
            }}
          >
            Prev
          </button>
          Page {pageNumber} of {numPages}
          <button
            onClick={() => {
              flipBookRef.current?.pageFlip()?.flipNext();
              // flipBook?.flipNext();
              // console.log(flipBook);
              // flipBook?.flipNext();
            }}
          >
            Next
          </button>
        </p>
      </>
    );
  })
);

export default App;
